import { defineComponent } from 'vue';
import './index.less';
import SvgIcon from '@/components/SvgIcon';
import { Divider, Empty, NavBar } from 'vant';
import { getProfile } from '@/api/home';
import loading from '@/utils/loading';
import { ElIcon } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';
import dd from 'dingtalk-jsapi';
import { isMobile } from '@/utils';
export default defineComponent({
  name: 'Profile',
  setup() {
    const profileInfo = ref() as AnyObject;
    loading.show();
    const router = useRouter();
    getProfile()
      .then((res) => {
        profileInfo.value = res.data;
      })
      .finally(() => loading.hide());
    const domData = {
      profile: {
        title: '个人信息',
        svg: 'p_1',
        list: {
          staff: '员工',
          name: '姓名',
          en_name: '英文名',
          sex: '性别',
          birthday: '出生日期',
          age: '年龄',
          is_marry: '婚否',
          nation: '民族',
          idcard: '身份证号',
          phone: '手机号',
          emergency_contact: '紧急联系人姓名/关系/电话',
          politics: '政治面貌',
          current_address: '	现居住地',
          idcard_address: '	户口所在地'
        }
      },
      card_info: {
        title: '社保/公积金/银行卡',
        svg: 'p_2',
        list: {
          insure_number: '社保号',
          funds: '公积金账号',
          bank_number: '银行卡号',
          bank: '开户行'
        }
      },
      graduate: {
        title: '教育经历',
        svg: 'p_3',
        list: {
          school: '毕业院校',
          speciality: '专业',
          qualification: '学历',
          subject: '文/理科'
        }
      },
      job: {
        title: '入职信息',
        svg: 'p_4',
        list: {
          position: '职位',
          department: '部门',
          center_in: '所在中心',
          organization: '组织',
          group: '组别',
          seniority: '本公司工龄',
          join_time: '入职日期',
          email: '工作邮箱',
          job_number: '工号',
          trial: '试用期',
          formal_date: '转正日期',
          job_category: '职位类型',
          try_salary: '月试用薪资',
          formal_salary: '月转正薪资',
          remark: '备注'
        }
      },
      contract: {
        title: '劳动合同信息',
        svg: 'p_5',
        list: {
          contract: '合同时长',
          contract_start: '合同开始日期',
          contract_end: '合同结束日期'
        }
      }
    };
    const uploadData = {
      title: '资料上传',
      svg: 'p_6',
      list: {
        idcard_file: '身份证附件',
        qualification_file: '学历附件',
        depart_file: '离职证明附件',
        office_file: 'Offer文档附件',
        certificate_file: '职称证书附件',
        experience_file: '简历',
        photo_file: '一寸照片（工牌）',
        other_file: '其他附件',
        contract_file: '劳动合同附件',
        secrecy_file: '保密附件',
        competition_file: '竞业限制协议'
      }
    };
    const share = () => {
      try {
        dd.biz.util.share({
          type: 0, //分享类型，0:全部组件 默认；1:只能分享到钉钉；2:不能分享，只有刷新按钮
          url: 'https://h5.mythinkcar.cn/vueh5/homepage/index',
          title: 'TCPI',
          content:
            'TCPI是星卡科技的个人洞察平台，致力于让每个员工在公司愿景下一起努力，实现公司和个人的共同发展。',
          image: `${import.meta.env.VITE_STATIC_URL}/icon_pi.png`
        });
      } catch (error) {
        console.log(error);
      }
    };
    return () => (
      <div class="profile_outwrap">
        {isMobile() ? (
          <NavBar
            title="个人资料"
            left-arrow
            safe-area-inset-top
            fixed
            placeholder
            onClickLeft={() => router.back()}
            v-slots={{
              right: () => (
                <div class="flex-start">
                  <div onClick={share} class="bar_more">
                    ...
                  </div>
                </div>
              )
            }}
          />
        ) : (
          <p class="thumb flex-start" onClick={() => router.back()}>
            <ElIcon>
              <ArrowLeft />
            </ElIcon>
            首页
          </p>
        )}

        {profileInfo.value ? (
          <div class="profile_wrap">
            {Object.values(domData).map((profile: AnyObject) => (
              <div class="profile_item">
                <header class="flex-start">
                  <SvgIcon width="14px" height="14px" name={profile.svg} />
                  <div class="title">{profile.title}</div>
                </header>
                <Divider />
                <main>
                  {Object.entries(profile.list).map((item: AnyObject) => (
                    <div class="main_item">
                      <p class="subtitle">{item[1]}</p>
                      <p class="content">
                        {profileInfo.value[item[0]] || '__'}
                      </p>
                    </div>
                  ))}
                </main>
              </div>
            ))}
            <div class="profile_item">
              <header class="flex-start">
                <SvgIcon width="14px" height="14px" name={uploadData.svg} />
                <div class="title">{uploadData.title}</div>
              </header>
              <Divider />
              <main>
                {Object.entries(uploadData.list).map((item: AnyObject) => (
                  <div class="main_item">
                    <p class="subtitle">{item[1]}</p>
                    <a
                      style={{ color: '#457bd9' }}
                      target="_blank"
                      class="content"
                      href={profileInfo.value[item[0]]}
                    >
                      查看
                    </a>
                  </div>
                ))}
              </main>
            </div>
          </div>
        ) : (
          <Empty description="暂无" />
        )}
      </div>
    );
  }
});
